import {defineComponent, ref} from 'vue';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Style from "@/views/HomePage/1080.module.scss";
import {useRoute, useRouter} from "vue-router";
import {IHomePageTitle} from "@/api/typing";



export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 从路由中获取参数
        const route = useRoute();
        const router = useRouter();
        const itemInfo =ref(route.query.itemInfo ? JSON.parse(route.query.itemInfo as string): []);
        console.log("itemInfo",itemInfo.value)
        const handleClick = (item: IHomePageTitle) => {
            console.log("item",item)
            if (item.to) {
                router.push({
                    path: item.to, query: {
                        // itemInfo: JSON.stringify(item?.data)
                    }
                })
            }
        }
        return () => (<>
            <div class={Style.container_mar}>
                <div class={Style.content}>
                    {/*//大标题*/}
                    {itemInfo.value[0].desc ?
                        itemInfo.value
                        .map((item: IHomePageTitle, index: any) => (
                            <div class={Style.item}
                                 style={{backgroundImage: `url(${item.img})`}}
                                 onClick={() => {handleClick(item)}}
                            >
                                <div>
                                    <div class={Style.text1}>
                                        {item.title}
                                    </div>
                                    <div class={Style.text2}>
                                        {item.desc}
                                    </div>
                                </div>
                                <img class={Style.item_icon} src={item.icon} />
                            </div>
                        )):
                        <div class={Style.min_content}>
                            {itemInfo.value
                                .map((item: IHomePageTitle, index: any) => (
                                    <div class={Style.min_item}
                                         style={{backgroundImage: `url(${item.img})`}}
                                         onClick={() => {handleClick(item)}}
                                    >
                                        <div class={[Style.min_img]} style={{ backgroundImage: `url(${item.iconImg})` }}>
                                            <img class={Style.min_icon}  src={item.icon} />
                                        </div>
                                        <div class={Style.min_item_text}>
                                            {item.title}
                                        </div>
                                    </div>
                                ))}
                        </div>
                }
                </div>
            </div>

        </>);
    }
})

